<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>维修</el-breadcrumb-item>
      <el-breadcrumb-item><b>维修管理</b></el-breadcrumb-item>
    </el-breadcrumb>

    <!--  表格-->
    <div style="margin:20px">
      <el-table :data="repairInfo" stripe border style="width: 100%">
        <el-table-column prop="id" label="序号" v-if="show"/>
        <el-table-column prop="dept" label="部门"/>
        <el-table-column prop="door" label="门牌号"/>
        <el-table-column prop="sname" label="报修人"  />
        <el-table-column prop="content" label="维修内容"  />
        <el-table-column prop="repairDt" label="报修时间" />
        <el-table-column prop="other" label="其他问题" />
        <el-table-column prop="situation" label="维修进度" />
        <el-table-column prop="loppyDt" label="维修时间" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
                size="small"
                type="danger"
                :disabled="scope.row.status === '已退单'|| scope.row.situation === '全部完成'"
                @click="tableEditHandler(scope.$index, scope.row)">
              <el-icon><Bell /></el-icon>&nbsp;退单
            </el-button>
            <el-button
                size="small"
                type="warning"
                :disabled="scope.row.situation === '全部完成'"
                @click="repairHandler(scope.$index, scope.row)">
              <el-icon><MagicStick /></el-icon>&nbsp;维修
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页-->
    <div class="page">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5,8]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogEditState" title="维修进度" width="380">
      <div>
        <el-form ref="formEditRef" :model="formEdit"
                 label-width="120px">
          <el-form-item prop="id" v-if="false">
            <el-input v-model="formEdit.id" ></el-input>
          </el-form-item>
          <el-form-item prop="situation" label="进度">
            <el-select v-model="formEdit.situation" >
              <el-option label="全部完成" value="全部完成"></el-option>
              <el-option label="部分完成" value="部分完成"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogEditOnReset">取消</el-button>
          <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>

import {ArrowRight, MagicStick,Bell} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/daily";
import {ElMessage} from "element-plus";
onMounted(()=>{
  getRepair();
})
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const repairInfo=ref([]);
const  getRepair=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    status:"已接单"
    // 初始时不包含其他参数
  };
  request({
    url:'/repairApply/getAll',
    method:'get',
    params,
  }).then((req)=>{
    if (200==req.data.errorCode){
      repairInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getRepair();
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getRepair();
}
///////////////////////////////退单//////////////////////
const formEditData = {
  id:'',
  status:'',
  situation:''
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id;

  request({
    url: '/repairApply/reject',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      ElMessage({
        type: 'success',
        message: '退单成功！',
      });
      getRepair();
    } else {
      ElMessage({
        type: 'error',
        message: '退单失败！',
      });
    }
  })
}

//////////////////维修////////////
const dialogEditState = ref(false)
const repairHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id
  formEdit.condition = rowData.condition
  dialogEditState.value = true
}
const dialogEditOnSubmit = () => {
  request({
    url: '/repairApply/repair',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      dialogEditState.value = false
      getRepair();
    }
  })
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formEditData)
  dialogEditState.value = false
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>